<style lang="stylus" type="text/stylus">
@import 'css/edit-con.styl';
</style>

<template>
  <div id="block">
    <div class="edit-header">
      <span
        @click="goBack()"
        class="route-title"
      >{{getRouteQuery.pageName}}</span>
      <span class="page-name">&nbsp;/&nbsp;查看申请：{{applyData.companyName}}</span>
    </div>
    <div id="edit-con">
      <VuePerfectScrollbar
        ref="componentConL"
        class="edit-con-l"
      >
        <ul
          class="edit-con-l-nav"
          v-if="applyData.id"
        >
          <edit-con-l-nav
            @parentFun="parentfun"
            v-for="nav1 in applyData.catalogs"
            :key="nav1.id"
            v-if="!nav1.paragraph"
            :catalogs="nav1"
            :componentDefaulf="componentID"
          ></edit-con-l-nav>
          <li
            v-if="auditStep.replyStatus!=''"
            class="supplement"
            @click='getSupplement(applyData.id)'
          >
            待补充的材料
          </li>
          <li :class="listLeve(0)">
            <div class="leve-title">资助申请相关资料</div>
            <ul class="catalogs">
              <edit-con-l-nav
                @parentFun="parentfun"
                :componentDefaulf="componentID"
                v-for="nav2 in applyData.catalogs"
                v-if="nav2.selected"
                :key="nav2.id"
                :catalogs="nav2"
              ></edit-con-l-nav>
            </ul>
          </li>
        </ul>
      </VuePerfectScrollbar>
      <div class="edit-con-r">
        <div class="edit-con-r-title">查看申请</div>
        <VuePerfectScrollbar
          ref="componentConR"
          class="edit-con-r-ps"
        >
          <componentDetail :componentData="componentDetailData"></componentDetail>
        </VuePerfectScrollbar>
      </div>
      <div class="edit-component">
        <div class="edit-component-title">操作</div>
        <VuePerfectScrollbar
          ref="componentConEdit"
          class="edit-component-ps"
        >
          <EditComponent
            @goBack="goBack"
            @componentConEditPs="componentConEditPs"
            v-if="applyData.id"
            :block="getRouteQuery"
            :editComponentData="applyData"
            :auditStepObj="auditStep"
          ></EditComponent>
        </VuePerfectScrollbar>
      </div>
    </div>

    <!-- 待补充材料模态框 -->
    <Modal
      id="addInfoC"
      v-model="stuff"
      title="待补充的材料"
    >
      <VuePerfectScrollbar style='height:318px'>
        <div class="supplementBody">
          <div class="supplementData">

            <ul v-if='supplementDataTwoLength'>
              <li
                class="existItem"
                v-for="(post,index) in supplementDataTwo"
                :key="index"
              >
                <p class="titleFileName">{{index+1}}.{{post.file_name}}</p>
                <ul>
                  <li class="existName">
                    <i class="ivu-icon ivu-icon-document-text"></i>
                    <a
                      :href="post.url"
                      target="_blank"
                    >{{post.fileinfo_name}}</a>
                  </li>
                </ul>
              </li>
            </ul>

            <div
              class="noContent"
              v-else
            >企业还未提交补充材料</div>
          </div>
        </div>
      </VuePerfectScrollbar>
      <div slot="footer">
        <!-- <Button type="text" @click="closeData()">取消</Button> -->
        <!-- <Button type="primary" @click="submitData()" size="large">确认提交</Button> -->
      </div>
    </Modal>
  </div>
</template>
<script type="text/ecmascript-6">
import editConLNav from "./editConLNav.vue";
import componentDetail from "./componentDetail.vue";
import EditComponent from "./editComponent.vue";

export default {
  name: "Component",
  data() {
    return {
      parentfunObj: {},
      componentID: "",
      applyData: {},
      editComponentData: {},
      auditStep: {}, //当前环节的整个对象
      stuff: false,
      supplementDataTwo: [] //已经提交
    };
  },
  components: {
    editConLNav,
    componentDetail,
    EditComponent
  },
  computed: {
    // 服务器判断118
    server_118() {
      return [11812695244, 120236189, 17216646].includes(this._SERVER);
    },
    supplementDataTwoLength() {
      return this.supplementDataTwo && this.supplementDataTwo.length >= 1;
    },
    getApplyId() {
      return this.getRouteQuery.id;
    },
    getRouteQuery() {
      return this.$route.query;
    },
    getComponentURL() {
      let url = this.$store.getters.getComponentHistory;
      return url[url.length - 1];
    },
    componentDetailData() {
      if (this.parentfunObj.id == undefined) {
        return [];
      }
      this.ajaxData(
        {
          url: this.getComponentURL,
          urlv2: "v2",
          type: "get",
          data: {
            applyId: this.getApplyId,
            componentId: this.parentfunObj.id
          }
        },
        (res, all) => {
          if (all.code == 0) {
            this.$store.commit("changeGroupData", res);
            setTimeout(() => {
              this.$refs.componentConR.update();
            }, 10);

            return res;
          }
        }
      );
    }
  },
  methods: {
    //========
    getSupplement(applyDataId) {
      this.stuff = true;
      if (applyDataId) {
        this.ajaxData(
          {
            type: "get",
            url: "/apply/getFormSupplements",
            data: {
              applyId: applyDataId
            }
          },
          res => {
            this.supplementDataTwo = res.doneList;
          }
        );
      }
    },
    goBack() {
      this.$router.push({
        name: this.getRouteQuery.name,
        query: {
          policyId: this.applyData.policyId,
          scrollLeftTop: this.getRouteQuery.scrollLeftTop,
          scrollRightTop: this.getRouteQuery.scrollRightTop,
          tapChks: this.getRouteQuery.tapChks,
          navChks: this.getRouteQuery.navChks
        }
      });
    },

    getData(action) {
      this.ajaxData(
        {
          type: "get",
          urlv2: "v2",
          url: `/apply`,
          data: {
            applyId: this.getApplyId
          }
        },
        (res, all) => {
          if (all.code == 0) {
            this.applyData = res;

            this.$refs.componentConEdit.update();
            !action ? this.parentfun(res.catalogs[0].components[0]) : "";

            if (this.applyData.processInstance.activities) {
              let stepId = this.applyData.processInstance.activities;
              if (stepId[1] && stepId[1].children) {
                let Obj = stepId[1].children;
                for (var i = 0; i < Obj.length; i++) {
                  if (Obj[i].ended == false) {
                    this.auditStep = Obj[i];
                    return;
                  }
                }
              }
            }
            // this.$refs.componentConEdit.update();
            // !action ? this.parentfun(res.catalogs[0].components[0]) : "";

            // if (this.applyData.processInstance.activities) {
            //   let stepId = this.applyData.processInstance.activities;
            //   if (stepId[1] && stepId[1].children) {
            //     let Obj = stepId[1].children;
            //     for (var i = 0; i < Obj.length; i++) {
            //       if (Obj[i].ended == false) {
            //         this.auditStep = Obj[i];
            //         // console.log(this.auditStep);
            //         return;
            //       }
            //     }
            //   }
            // }
          }
        }
      );
    },
    listLeve(num) {
      return "list-" + num;
    },
    parentfun(obj) {
      this.parentfunObj = obj;
      this.componentID = obj.id;
    },
    componentConEditPs() {
      this.getData("componentConEditPs");
    }
  },
  created() {
    let url = `/component`;
    this.$store.commit("resetComponentHistory", url);
    this.getData();
  }
};
</script>
